<template>
  <el-dialog
    title="销售发货"
    :visible="selectImportMaterialDialog"
    width="70%"
    class="om-order-importMaterial-select"
    @close="selectImportMaterialClose"
  >
    <div class="app-container order-importMaterial-box">
      <el-row :gutter="20">
        <div class="layout-box">
          <el-form :inline="true" label-width="70px" class="search-top">
            <div class="search-sub">
              <el-form-item label="销售单号" label-width="82">
                <el-input
                  v-model="searchForm.omCode"
                  clearable
                  size="small"
                  style="width: 150px"
                />
              </el-form-item>
              <el-form-item label="客户名称" label-width="82">
                <el-input
                  v-model="searchForm.customer"
                  clearable
                  size="small"
                  style="width: 250px"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="search"
                  >搜索
                </el-button>
              </el-form-item>
            </div>
            <div>
              <el-button
                type="primary"
                plain
                icon="el-icon-menu"
                size="mini"
                @click="checkleAll"
                >查询所有</el-button
              >
            </div>
          </el-form>
          <!-- 订单列表 -->
          <el-table
            :data="detailTableData"
            border
            style="width: 100%"
            v-loading="detailLoading"
            :height="detailMaxHeight"
            ref="multipleTable"
            @selection-change="handleSelectionChange"
            :row-class-name="tableRowClassName"
          >
            <el-table-column
              prop="om_code"
              label="销售订单号"
              align="center"
              width="180"
            >
            </el-table-column>
            <el-table-column
              prop="customer"
              label="客户"
              align="center"
              width="250"
            >
              <template v-slot="scope">
                <div
                  @dblclick="selectCustomer(scope.row)"
                  style="cursor: pointer"
                >
                  <span>{{ scope.row.customer }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="inv_code"
              label="物料编码"
              align="center"
              width="145"
            >
            </el-table-column>
            <el-table-column label="物料名称" align="center">
              <template v-slot="scope">
                <div>
                  <span
                    >{{ scope.row.inv_name }}{{ scope.row.inv_attribute }}</span
                  >
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="unit_name"
              label="主计量"
              align="center"
              width="100"
            >
            </el-table-column>
            <el-table-column label="订单数量" width="120" align="center">
              <template v-slot="scope">
                <div style="text-align: right">
                  <span>{{ scope.row.quantity }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column width="120" label="已发数量" align="center">
              <template v-slot="scope">
                <div style="text-align: right">
                  <span>{{ scope.row.wi_quantity }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column width="120" label="未发数量" align="center">
              <template v-slot="scope">
                <div style="text-align: right">
                  <span>{{ scope.row.deliverable }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column type="selection" width="50" align="center">
            </el-table-column>
          </el-table>
        </div>
      </el-row>
      <!-- 订单分页 -->
      <pagination
        v-if="detailTotal > 20"
        :total="detailTotal"
        :page.sync="queryDetail.pageNum"
        :limit.sync="queryDetail.pageSize"
        @pagination="getDetailList"
      />
    </div>
    <div class="ImportMaterial-success">
      <div>
        <el-button
          :disabled="successStatus"
          type="primary"
          @click="handleImportMaterialSuccess"
          >确定</el-button
        >
        <el-button @click="handleClose">取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {
  listOrderDetail, //查询订单
  materialSort,
} from "../../api/deliver";
let self;
export default {
  data() {
    return {
      // 已选物料
      selectData: [],
      // 明细遮罩层
      detailLoading: true,
      //明细查询参数
      queryDetail: {
        pageNum: 1,
        pageSize: 100,
        invCode: "",
        invName: "",
        customer: "",
        omCode: "",
        flag: true,
        invoiceStatus: "1",
        workType: this.$route.query.workType,
      },
      //搜索参数
      searchForm: {
        customer: "",
        omCode: "",
      },
      // 小数位数

      // 明细总条数
      detailTotal: 0,
      // 明细最大高度
      detailMaxHeight: null,
      //物料大类数据
      sortData: [],
      //物料大类下标
      sortIndex: null,
      //明细数据
      detailTableData: [],
      successStatus: true,
    };
  },
  beforeCreate() {
    self = this;
  },
  props: {
    selectImportMaterialDialog: {
      type: Boolean,
      default: true,
    },
    optionsinvOutType: {
      type: Array,
      default: () => {
        return [];
      },
    },
    decimal: {
      type: String,
      default: "2",
    },
  },
  created() {
    this.getDetailList();
  },
  methods: {
    //查询所有明细
    handleCheckleDetail() {
      this.queryDetail = {
        pageNum: 1,
        pageSize: 100,
        customer: "",
        flag: true,
        invoiceStatus: "1",
      };
      this.sortIndex = null;
      this.getDetailList();
    },

    // 获取明细
    getDetailList() {
      this.detailLoading = true;
      listOrderDetail(this.queryDetail).then((res) => {
        if (res.code == 200) {
          this.detailLoading = false;
          let list = JSON.parse(JSON.stringify(res.rows));
          let last = list[0].customer,
            tag = 0;
          list.forEach((item, i) => {
            if (list[i].customer !== last) {
              if (tag == 1) {
                tag = 0;
              } else if (tag == 0) {
                tag = 1;
              }
            }
            list[i].tag = tag;
            last = list[i].customer;
          });
          this.detailTableData = list;
          this.getDecimal();
        } else {
          this.detailTableData = [];
        }
        this.detailTotal = res.total;
        this.getDecimal();
        this.detailMaxHeight = `${document.documentElement.clientHeight}` - 390;
      });
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.tag == 1) {
        return "warning-row";
      }
    },
    //获取物料大类
    getMaterialSort() {
      materialSort().then((res) => {
        this.sortData = res.data;
      });
    },

    //点击料品大类
    handleSort(data, index) {
      this.sortIndex = index;
      this.queryDetail.sortId = data.sortId;
      this.getDetailList();
    },

    //批量选择
    handleSelectionChange(row) {
      this.selectData = [];
      if (row.length > 0) {
        let customerId = row[0].customer_id,
          flag = row.every((item) => item.customer_id === customerId);
        if (flag == true) {
          this.successStatus = false;
          this.selectData.push(...row);
        } else {
          this.successStatus = true;
          this.msgError("请选择同一客户订单");
        }
      } else {
        this.successStatus = true;
      }
    },

    // 双击选择相同客户
    selectCustomer(data) {
      let rows = this.detailTableData.filter((item) => {
        return item.customer_id == data.customer_id;
      });
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },

    //格式化数量单价金额小数位数
    getDecimal() {
      if (this.detailTableData.length > 0) {
        this.detailTableData.forEach((item) => {
          if (item.wi_quantity !== undefined && item.wi_quantity !== null) {
            item.wi_quantity = parseFloat(item.wi_quantity).toFixed(
              this.decimal
            );
          }
          if (item.quantity !== undefined && item.quantity !== null) {
            item.quantity = parseFloat(item.quantity).toFixed(this.decimal);
          }
          if (item.deliverable !== undefined && item.deliverable !== null) {
            item.deliverable = parseFloat(item.deliverable).toFixed(
              this.decimal
            );
          }
        });
      }
    },

    // 弹框状态
    selectImportMaterialClose() {
      this.$emit("selectImportMaterialClose");
    },

    //确定选取
    handleImportMaterialSuccess() {
      this.$emit("handleImportMaterialSuccess", this.selectData);
      this.selectImportMaterialClose();
    },

    //搜索
    search() {
      this.queryDetail.customer = this.searchForm.customer;
      this.queryDetail.omCode = this.searchForm.omCode;
      this.getDetailList();
    },
    // 查询所有
    checkleAll() {
      //清空搜索信息，避免干扰
      this.queryDetail.customer = "";
      this.searchForm.customer = "";
      this.queryDetail.omCode = "";
      this.searchForm.omCode = "";
      this.getDetailList();
    },

    // 关闭弹框
    handleClose() {
      this.selectImportMaterialClose();
    },
  },
  filters: {
    //时间格式化
    inMaterTime(date) {
      let time = new Date(date);
      return (
        time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate()
      );
    },

    //PP专用
    isPurpose(i) {
      switch (i) {
        case "0":
          return "否";
          break;
        case "1":
          return "是";
          break;
        default:
          return "否";
      }
    },
    // 供应商字符串截取
    beyondStr(str) {
      if (str.length > 6) {
        str = str.substr(0, 6) + "...";
        return str;
      }
    },
    //匹配出库方式
    matchingType(data) {
      let type = "";
      if (self.optionsinvOutType && self.optionsinvOutType.length > 0) {
        self.optionsinvOutType.forEach((item) => {
          if (item.dictValue == data) {
            type = item.dictLabel;
          }
        });
      }
      return type;
    },
  },
};
</script>
<style lang="scss">
.om-order-importMaterial-select {
  .el-dialog__body {
    height: calc(100vh - 230px);
    position: relative;
  }

  .search-top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }

  .el-pagination {
    left: 0;
  }

  .app-container {
    padding-top: 0;
  }

  .layout-box {
    .el-link.is-underline:hover:after {
      border: none;
    }
    .el-table .warning-row {
      background-color: #f5f7fa;
    }

    .search-box {
      display: flex;
      margin-bottom: 20px;

      .search-input {
        display: flex;
        margin-right: 15px;

        .input-data {
          min-width: 220px !important;
        }

        .el-input {
          margin-right: 15px;
        }
      }
    }

    .sort-active {
      background: #1890ff !important;
      border-color: #1890ff !important;
      color: #ffffff !important;
    }

    .con-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .material-sort {
      span {
        font-size: 14px;
        padding: 0px 15px;
        background: #f4f4f5;
        color: #999;
        display: inline-block;
        border-radius: 3px;
        margin-left: 5px;
        margin-right: 5px;
        cursor: pointer;
        line-height: 26px;
        border: 1px solid #e9e9eb;
      }
    }
  }

  .ImportMaterial-success {
    position: absolute;
    bottom: 26px;
    right: 40px;

    button {
      padding: 8px 40px;
    }
  }
}
</style>
